<template>
	<view class="tixian">
		<view class="tixianbox">
			<view class="item">
				<text>开户名</text>
				<input type="text" v-model="username" placeholder="请输入" />
			</view>
			<view class="item" @click="showSinglePicker">
				<text>开户银行</text>
				<span>{{ bank }}</span>
				<!-- <input type="text" v-model="bank" placeholder="请输入" /> -->
			</view>
			<view class="item">
				<text>开户地址</text>
				<input type="text" v-model="bankzhi" placeholder="请输入" />
			</view>
			<view class="item">
				<text>银行卡号</text>
				<input type="text" v-model="bankbh" placeholder="请输入" />
			</view>

			<view class="item1">
				<view class="maleft">
					<text>验证码</text>
					<input type="text" v-model="code" />
				</view>

				<button class="code" :class="{ btnactive: !btnflag }" :disabled="btnflag == 0" @tap="getCode">{{ codemsg }}</button>
			</view>
		</view>
		<button class="queren" @tap="queren">确认</button>
		<mpvue-picker
			:themeColor="themeColor"
			ref="mpvuePicker"
			:mode="mode"
			:deepLength="deepLength"
			:pickerValueDefault="pickerValueDefault"
			@onConfirm="onConfirm"
			@onCancel="onCancel"
			:pickerValueArray="pickerValueArray"
		></mpvue-picker>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import mpvuePicker from '@/components/mpvue-picker/mpvuePicker.vue';
export default {
	data() {
		return {
			bank: '请选择',
			themeColor: '#007AFF',
			mode: 'selector',
			deepLength: 1,
			pickerValueDefault: [0],
			PickerIndex: 1,
			username: '',
			type: '',
			bankzhi: '',
			bankbh: '',
			codemsg: '点击获取',
			btnflag: true,
			bankid: '',
			card_id: '',

			code: '',
			pickerValueArray: []
		};
	},
	components: {
		mpvuePicker
	},
	computed: mapState({
		getbank: 'getbank',
		userinfo: 'userinfo'
	}),
	onLoad(e) {
		this.type = e.type;
		var data = {
			token: uni.getStorageSync('token')
		};
		this.$store.dispatch('getbank', data).then(() => {
			this.pickerValueArray = this.getbank;
		});
		if (e.type == 1) {
			this.username = e.username;
			this.bankzhi = e.bankzhi;
			this.bankbh = e.bankbh;
			this.bank = e.bank;
			this.card_id = e.card_id;
			setTimeout(() => {
				for (var i = 0; i < this.getbank.length; i++) {
					if (this.bank == this.getbank[i]['label']) {
						this.bankid = this.getbank[i]['value'];
						return;
					}
				}
			}, 100);
		}

		console.log(e);
	},
	methods: {
		queren() {
			if (this.username == '' || this.bankzhi == '' || this.bankbh == '' || this.bankid == '' || this.code == '') {
				uni.showToast({
					title: '信息不能为空',
					icon: 'none'
				});
			} else {
				var cardbh = this.bankbh.replace(/\s*/g,"");
				var data = {
					token: uni.getStorageSync('token'),
					bank_id: this.bankid,
					kh_xingming: this.username,
					bank_card: cardbh,
					bank_khh: this.bankzhi,
					sms_code: this.code
				};
				// 添加
				if (this.type == 2) {
					this.$store.dispatch('addcard', data).then(res => {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
						if (res.data.code == 1) {
							
							uni.navigateBack({
							    delta: 1
							});
							
						}
					});
				} else if (this.type == 1) {
					data.card_id = this.card_id;
					this.$store.dispatch('editcard', data).then(res => {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
						if (res.data.code == 1) {
							// uni.redirectTo({
							// 	url: '../cardlist/index'
							// });
							uni.navigateBack({
							    delta: 1
							});
							var data = {
								token: uni.getStorageSync('token')
							}
							this.$store
								.dispatch('cardlist', data)
								
						}
					});
				}
			}
		},
		getCode() {
			this.code = '';

			var tellReg = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
			var data = {
				tel: this.userinfo.tel,
				lb: 4
			};
			if (tellReg.test(this.userinfo.tel)) {
				this.$store.dispatch('getcode', data).then(res => {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					});
					if (res.data.code == 1) {
						var num = 120;
						var timer = setInterval(() => {
							this.btnflag = false;
							this.codemsg = '' + num + 's';
							num--;
							if (num < 1) {
								this.btnflag = true;
								this.codemsg = '点击获取';
								clearInterval(timer);
							}
						}, 1000);
					}
				});
			} else {
				uni.showToast({
					title: '请登录有效账户',
					icon: 'none'
				});
			}
		},
		onCancel(e) {
			console.log(e);
		},
		showSinglePicker(val) {
			this.PickerIndex = val * 1;
			this.mode = 'selector';
			console.log(val);
			this.$refs.mpvuePicker.show();
		},
		onConfirm(e) {
			this.bank = JSON.parse(JSON.stringify(e)).label;
			this.bankid = JSON.parse(JSON.stringify(e)).value[0];
			console.log(this.bankid);
		}
	}
};
</script>

<style lang="scss" scoped src="./index.scss"></style>
